<template>
  <div class="Home">
    <el-space wrap class="main-data-top">
      <div class="list fx-column">
        <div class="list-header fx-space-between-center">
          <div class="list-header-text">点击量</div>
        </div>
        <div class="list-content flexbox">
          <div class="content">
            <div class="content-data">
              <span class="sh">↑</span>
              <CountTo :startVal='0' :endVal='3000' :decimals='2' :duration='3000' class="count-to"></CountTo>
            </div>
          </div>
        </div>
      </div>
      <div class="list fx-column">
        <div class="list-header fx-space-between-center">
          <div class="list-header-text">访问量</div>
        </div>
        <div class="list-content flexbox">
          <div class="content">
            <div class="content-data">
              <span class="xh">↓</span>
              <CountTo :startVal='0' :endVal='300' :decimals='0' :duration='3000' class="count-to"></CountTo>
            </div>
          </div>
        </div>
      </div>
      <div class="list fx-column">
        <div class="list-header fx-space-between-center">
          <div class="list-header-text">交易金额</div>
        </div>
        <div class="list-content flexbox">
          <div class="content">
            <div class="content-data">
              <span class="sh">↑</span>
              <CountTo :startVal='0' :endVal='3000.02' :decimals='2' :duration='3000' class="count-to"></CountTo><span>￥</span>
            </div>
          </div>
        </div>
      </div>
      <div class="list fx-column">
        <div class="list-header fx-space-between-center">
          <div class="list-header-text">新增关注</div>
        </div>
        <div class="list-content flexbox">
          <div class="content">
            <div class="content-data">
              <span class="sh">↑</span>
              <CountTo :startVal='0' :endVal='3000' :decimals='0' :duration='3000' class="count-to"></CountTo><span>人</span>
            </div>
          </div>
        </div>
      </div>
    </el-space>
    <div class="main-content fx-column">
      <div class="list-header fx-space-between-center">
        <div class="list-header-text">新增关注趋势图</div>
      </div>
      <div class="echarts" id="echart"></div>
    </div>
    <div class="main-list-table">
      <div class="list-header fx-space-between-center">
        <div class="list-header-text">列表数据</div>
      </div>
      <div class="flexbox list-table">
        <div class="left-table">
          <el-table :data="tableData" style="width:100%" border>
            <el-table-column show-overflow-tooltip prop="date" label="Date" width="80" />
            <el-table-column prop="name" label="Name" width="100" />
            <el-table-column prop="address" label="Address" />
          </el-table>
        </div>
      </div>
    </div>
    <div>456456</div>
  </div>
</template>
<script>
import { useStore } from "vuex";
import { ref, onMounted, onUnmounted ,computed,watch} from "vue";
import { CountTo } from "vue3-count-to";
import * as echarts from "echarts";
export default {
  name: "HomeIndex",
  components: {
    CountTo,
  },
  setup() {
    const size = ref(0);
    let echart = echarts;
    let chart = null;
    const store = useStore();
    const state = store;
    let isCollapse = ref(
      computed(() => {
        return state.state.app.isCollapse;
      })
    );
    const tableData = [
      {
        date: "2016-05-03",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-02",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-04",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-01",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-01",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-01",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-01",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-01",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
    ];
    const initChart = () => {
      chart = echart.init(document.getElementById("echart"));
      // 把配置和数据放这里
      chart.setOption({
        xAxis: {
          type: "category",
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
        },
        tooltip: {
          trigger: "axis",
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [
              820, 932, 901, 934, 1290, 1330, 1320, 801, 102, 230, 4321, 4129,
            ],
            type: "line",
            smooth: true,
          },
        ],
      });
      window.onresize = function () {
        //自适应大小
        chart.resize();
      };
    };
    const destroyedChart = () => {
      chart.dispose();
    };
    watch(isCollapse, () => {
      setTimeout(() => {
        chart.resize();
      }, 300);
    });
    onMounted(() => {
      initChart();
    });
    onUnmounted(() => {
      destroyedChart();
    });
    return {
      size,
      initChart,
      chart,
      destroyedChart,
      tableData,
      isCollapse
    };
  },
};
</script>
<style scoped lang='scss'>
.Home {
  padding: 15px 20px;
  .main-data-top {
    width: 100%;
    margin-bottom: 0 !important;
    :deep().el-space__item {
      display: block;
      flex: 0 0 25% !important;
      max-width: 25% !important;
      height: 200px;
      padding: 0 15px 0px 15px !important;
      margin: 0 0 15px 0px !important;
      &:nth-child(1) {
        padding: 0 15px 0px 0px !important;
      }
      &:nth-child(4) {
        padding: 0 0px 0px 15px !important;
      }
    }
  }
  .list {
    height: 200px;
    box-shadow: 0 0px 4px #dbdada;
    border-radius: 4px;
    .list-header {
      height: 50px;
      padding: 0 12px;
      border-bottom: 1px solid #e8eaec;
      .list-header-text {
        font-size: 16px;
      }
    }
    .list-content {
      flex: 1;
      .content {
        flex: 1;
        .content-data {
          margin-top: 60px;
          text-align: center;
          .count-to {
            font-size: 30px;
            margin-left: 10px;
          }
          .sh {
            color: blue;
          }
          .xh {
            color: red;
          }
        }
      }
    }
  }
  .main-content {
    width: 100%;
    height: 360px;
    box-shadow: 0 0px 4px #dbdada;
    border-radius: 4px;
    .list-header {
      height: 50px;
      padding: 0 12px;
      border-bottom: 1px solid #e8eaec;
      .list-header-text {
        font-size: 16px;
      }
    }
    .echarts {
      flex: 1;
    }
  }
  .main-list-table {
    // width: 100%;
    height: 480px;
    box-shadow: 0 0px 4px #dbdada;
    border-radius: 4px;
    margin-top: 15px;
    position: relative;
    .list-header {
      height: 50px;
      padding: 0 12px;
      border-bottom: 1px solid #e8eaec;
      .list-header-text {
        font-size: 16px;
      }
    }
    .list-table {
      padding: 20px 15px;
      position: absolute;
      width: 100%;
      .left-table {
        width: 100%;
        // max-width: 100%;
        // width: 600px;
      }
    }
  }
  @media screen and (max-width: 600px) {
  }
}
</style>
